<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>发布文章</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/plugns/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link type="text/javascript" src="/plugns/dtree/dtree.css"/>
    <link type="text/javascript" src="/plugns/dtree/font/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1041315_0zq2yro0cfn.css">
    <style type="text/css">
        .layui-form-item .layui-inline{ width:33.333%; float:left; margin-right:0; }
        @media(max-width:1240px){
            .layui-form-item .layui-inline{ width:100%; float:none; }
        }
        .layui-form-item .role-box {
            position: relative;
        }
        .layui-form-item .role-box .jq-role-inline {
            height: 100%;
            overflow: auto;
        }
        /***
        *  ztree 图标变成黄色
        */
        .ztree .line{
            line-height: 0;
            border-top:none;
            float: none;
        }
        .ztree li span.button.ico_docu {
            background-position: -110px 0;
            margin-right: 2px;
            vertical-align: top;
        }
        .multiSelect{ line-height:normal; height:auto; padding:4px 10px; overflow:hidden;min-height:38px; margin-top:-38px; left:0; z-index:99;position:relative;background:none;}
        .multiSelect a{ padding:2px 5px; background:#908e8e; border-radius:2px; color:#fff; display:block; line-height:20px; height:20px; margin:2px 5px 2px 0; float:left;}
        .multiSelect a span{ float:left;}
        .multiSelect a i{ float:left; display:block; margin:2px 0 0 2px; border-radius:2px; width:8px; height:8px; background:url(/images/close.png) no-repeat center; background-size:65%; padding:4px;}
        .multiSelect a i:hover{ background-color:#545556;}

        .layui-field-box a{ padding:2px 5px; background:#908e8e; border-radius:2px; color:#fff; display:block; line-height:20px; height:20px; margin:2px 5px 22px 0; float:left;}
        .layui-field-box a span{ float:left;}
        .boxadd{ float:left; display:block; margin:2px 0 0 2px; border-radius:2px; width:8px; height:8px; background-size:65%; padding:4px;}
    </style>
    <link rel="stylesheet" href="/plugns/zTree/v3/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="/plugns/editormd/css/editormd.css" />
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/plugns/zTree/v3/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/plugns/zTree/v3/js/jquery.ztree.excheck.js" charset="utf-8"></script>
    <script  type="text/javascript" th:inline="javascript">
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback:{
                onClick : function (event, treeId, treeNode) {
                    $("#category").val(treeNode.name);
                    $("input[name='sortId']").val(treeNode.id);
                    $("input[name='sortName']").val(treeNode.name);
                }
            }
        };
        var zNodes =[[${ztreeData}]];
        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");

    </script>
</head>
<body class="childrenBody">
<form class="layui-form" style="width:80%;">
    <div class="layui-form-item">
        <div class="layui-form-item">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                <legend style="font-size:16px;"></legend>
            </fieldset>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">封面</label>
            <div class="layui-input-block">

                <input type="hidden" class="layui-input" name="image" id="showPic">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test_showPic">上传封面</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo_showPic"  src="https://minghaozhi.oss-cn-beijing.aliyuncs.com/image/wenzhang.jpg" style="width: 100px;height: 100px">
                        <p id="demoText_showPic"></p>
                    </div>
                </div>
            </div>
        </div>
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">

            <input  type="text"  class="layui-input" name="title" lay-verify="required" placeholder="请输入标题">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">摘要</label>
        <div class="layui-input-block">
            <textarea name="introduction"  placeholder="请输入摘要" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分类</label>
        <div class="layui-input-block">
            <input type="hidden" name="sortId" >
            <input type="hidden" name="sortName" >
            <input type="text" id="category"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <input type="hidden" name="ztreeData">
            <ul id="treeDemo" class="ztree"></ul></div>
    </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">标签</label>
        <div class="layui-input-block" >
            <input type="checkbox" name="label" th:each="dict:${sysDictList}" th:value="${dict.value}" th:title="${dict.value}">
        </div>
    </div>
<div class="layui-form-item">
    <label class="layui-form-label">内容</label>
    <div class="layui-input-block">
        <div class="editormd" id="test-editormd">
            <textarea class="editormd-markdown-textarea" name="content" id="editormd"></textarea>
            <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
            <textarea class="editormd-html-textarea" id="htmlContent"></textarea>
        </div>
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">是否置顶</label>
    <div class="layui-input-block">

        <input type="checkbox" name="isTop"  lay-skin="switch" value="1" lay-text="是|否" >

    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">是否推荐</label>
    <div class="layui-input-block">

        <input type="checkbox" name="isRecommend"  lay-skin="switch" value="1" lay-text="是|否" >

    </div>
</div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否发布</label>
        <div class="layui-input-block">

            <input type="checkbox" name="status"  lay-skin="switch" value="1" lay-text="是|否" >

        </div>
    </div>
<div class="layui-form-item">
    <div class="layui-input-block">
        <button class="layui-btn" lay-submit=""  lay-filter="addBlogArticle"><i class="iconfont icon-wenzhang"></i>保存文章</button>
        <button class="layui-btn" lay-submit="" id="caogao" lay-filter="addBlogArticle"><i class="iconfont icon-xie"></i>存为草稿</button>
    </div>
</div>
</form>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/plugns/editormd/editormd.js"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['form','jquery','layer','upload','laydate'],function(){
        var form      = layui.form,
            $= layui.jquery,
            upload = layui.upload,
            laydate = layui.laydate,
            imageIndex,
            layer = layui.layer;
        $(function() {
            editormd("test-editormd", {
                width   : "90%",
                height  : 640,
                syncScrolling : "single",
                //你的lib目录的路径，我这边用JSP做测试的
                tocm : true, // Using [TOCM]
                tex : true, // 开启科学公式TeX语言支持，默认关闭
                flowChart : true, // 开启流程图支持，默认关闭
                path    : "/plugns/editormd/lib/",
                emoji: true,
                imageUpload : true,
                imageFormats : [ "jpg", "jpeg", "gif", "png", "bmp", "webp" ],
                imageUploadURL : "/file/editormdPic",
                onload: function () {
                    this.width("100%");
                    this.height(480);
                },
                    //this.resize("100%", 640);
                // previewTheme: "dark",//预览主题
                editorTheme: "pastel-on-dark",//编辑主题
                //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
                saveHTMLToTextarea : true
            });
        });
        //普通图片上传
        var upload_showPic = upload.render({
            elem: '#test_showPic',
            url: '/file/upload/',
            field:'test',
            before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo_showPic').attr('src', result); //图片链接（base64）
                });
                imageIndex = layer.load(2, {
                    shade: [0.3, '#333']
                });
            },
            done: function(res){
                layer.close(imageIndex);
                //如果上传失败
                if(res.success === false){
                    return layer.msg('上传失败');
                }
                $("#showPic").val(res.data.url);
            },
            error: function(){
                layer.close(imageIndex);
                //演示失败状态，并实现重传
                var demoText = $('#demoText_showPic');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    upload_showPic.upload();
                });
            }
        });



        //初始赋值
        laydate.render({
            elem: '#publistTime',
            value: new Date()
        });
        form.on("submit(addBlogArticle)",function(data){

            if(undefined === data.field.sortId || '' === data.field.sortId || null === data.field.sortId){
                layer.msg("请选择分类");
                return false;
            }
            var arr = new Array();
            $("input:checkbox[name='label']:checked").each(function(i) { // 遍历name=label的多选框
                arr[i] =$(this).val();
            });
            data.field.label = arr.join(",");//将数组合并成字符串
            if(undefined === data.field.isTop || '0' === data.field.isTop || null === data.field.isTop){
                data.field.isTop = 0;
            }else{
                data.field.isTop = 1;
            }

            if(undefined === data.field.isRecommend || '0' === data.field.isRecommend || null === data.field.isRecommend){
                data.field.isRecommend = 0;
            }else{
                data.field.isRecommend = 1;
            }
            if(undefined === data.field.sortId || null == data.field.sortId){
                layer.msg("文章分类不能为空",{time:1000});
                return false;
            }
            if (data.field.image===''){
               data.field.image='https://minghaozhi.oss-cn-beijing.aliyuncs.com/image/wenzhang.jpg';
            }

            var loadIndex = layer.load(2, {
                shade: [0.3, '#333']
            });
            $.ajax({
                url:"saveOrUpdate",
                type:"POST",
                data:data.field,
                success: function(res){
                    layer.close(loadIndex);
                    if(res.success){
                        parent.layer.msg("博客内容添加成功！",{time:1000},function(){
                            parent.layer.close(parent.addIndex);
                            //刷新父页面
                            parent.location.reload();
                        });
                    }else{
                        layer.msg(res.message);
                    }
                }
            });
            return false;
        });

    });
</script>
</body>
</html>